<template>
  <div class="name">
    <p class="classNme">用户管理</p>
    <P class="smallClassName">USER MANAGEMENT</P>
  </div>
  <div class="MessagePanel" style="padding: 15px 26px;">
    <div class="topButton">
      <el-button class="Btn" size="small" type="topSubButtom" @click="addUserGroup()">
        <svg-icon icon-class="add" class="buttonSvg"/>
        用户录入
      </el-button>
      <el-button class="Btn" size="small" type="topSubButtom" @click="deleteUser('')">
        <svg-icon icon-class="remove" class="buttonSvg"/>
        删除
      </el-button>
    </div>
    <el-table
        :data="tableData.slice((data.pageNum - 1) * data.pageSize, data.pageNum * data.pageSize)"
        :default-sort="{ prop: 'date', order: 'descending' }"
        style="width: 100%;"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column prop="loginName" label="登录名" align="center"/>
      <el-table-column prop="userName" label="用户名" align="center"/>
      <el-table-column prop="mobile" label="电话号码" align="center">
        <template #default="scope">
                <span style="color: #7db3e2">
                  {{ scope.row.mobile }}
                </span>
        </template>
      </el-table-column>
      <el-table-column prop="groupName" label="用户组" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button class="Btn" size="small" type="del" @click="addUser(scope.row)">
            <svg-icon icon-class="edit" class="buttonSvg"/>
          </el-button>
          <el-button class="btn-donate" size="small" type="del" @click="deleteUser(scope.row.userId)">
            <svg-icon icon-class="del" class="buttonSvg"/>
          </el-button>
          <el-button class="btn-donate" size="small" type="del" @click="passwordReset(scope.row.userId)">
            <svg-icon icon-class="passwordReset" class="buttonSvg"/>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          small
          background
          layout="prev, pager, next"
          :current-page="data.currentPage"
          :page-size="data.pageSize"
          :total="tableData.length"
          @current-change="currentChange"
          style="float: left;"/>
      <div class="pageData">
        <span class="tableDataLengh">共 {{ tableData.length }} 条</span>
        <span>每页 {{ data.pageSize }} 条</span>
      </div>
    </div>
    <edit-user ref="edit_user"/>
    <set-user-jurisdiction ref="set_user_jurisdiction"/>
  </div>
</template>


<script>
import SetUserJurisdiction from "@/views/userConfig/components/SetUserJurisdiction.vue";
import EditUser from "@/views/userConfig/components/EditUser.vue";

let me;
export default {
  name: "UserMessagePanel",
  components: {EditUser, SetUserJurisdiction},
  data() {
    return {
      data: {
        pageNum: 1,
        pageSize: 7,
        currentPage: 1
      },
      tableData: [],
      selected: []
    }
  },
  mounted() {
    me = this;
    this.selTableData();
  },
  methods: {
    currentChange(val) {
      this.data.pageNum = val;
      this.data.currentPage = val;
    },
    handleSelectionChange(val) {
      this.selected = val;
    },
    addUser(row) {
      this.$refs.edit_user.showDialog(row);
    },
    addUserGroup() {
      this.$refs.edit_user.showDialog();
    },
    async selTableData() {
      let response = await this.$asyncPost("user", {
        actionType: "userQuery"
      });
      if (response.success) {
        me.tableData = response.data;
      } else {
        this.$message.error(response.message);
      }
    },
    setJurisdiction() {
      this.$refs.set_user_jurisdiction.showDialog();
    },
    passwordReset(userId) {
      this.$confirm("是否重置密码?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      })
          .then(async () => {
            try {
              let response = await this.$asyncPost("user", {
                actionType: "resetPwd",
                userId: userId
              });
              if (response.success) {
                this.$message.success("密码重置成功");
              } else {
                this.$message.error(response.message);
              }
            } catch (error) {
              this.$message.error("密码重置时发生错误");
            }
          })
          .catch(() => {
            this.$message.info("取消");
          })
    },
    deleteUser(id) {
      if (id == '') {
        if (this.selected.length <= 0) {
          me.$message.warning('请先选择需要删除的用户');
          return;
        }
      }
      this.$confirm("是否删除该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      })
          .then(async () => {
            try {
              let response = await this.$asyncPost("user", {
                actionType: "userDelete",
                userIdList: id != '' ? [id] : this.selected.map(item => item.userId)
              });
              if (response.success) {
                this.$message.success("删除成功");
                this.selTableData();
              } else {
                this.$message.error(response.message);
              }
            } catch (error) {
              this.$message.error("删除时发生错误");
            }
          })
          .catch(() => {
            this.$message.info("取消");
          })
    },
  }
}
</script>
<style scoped lang="scss">

</style>